<template>
    <div>
        <el-select style="width:100%;" v-model="productName" value-key="id" placeholder="请选择商品" filterable :filter-method="getProductList" @change="changeProduct">
            <el-option v-for="(item,index) in productOptions" :key="item.id" style="width:650px" :label="item.name" :value="item">
                <div style="display: flex">
                    <span style="width: 80px;overflow: hidden;text-overflow: ellipsis;">{{ item.sn }}</span>
                    <span style="float: left;width: 160px;overflow: hidden;text-overflow: ellipsis;margin-left: 10px">{{ item.name }}</span>
                    <div style="width: 200px;">
                        <span style="color: #8492a6; font-size: 8px;">{{item.spec1}}</span>
                    </div>
                </div>
            </el-option>
            <div style="display: flex;width: 100%;position: absolute;bottom: 0">
                <div style="width: 75%;background-color: rgb(248,248,248);"></div>
                <div class="elOption" @click="toAddProduct">搜索商品</div>
                <!-- <div class="elOption1" @click="toSearchProduct">新增商品</div> -->
            </div>
            <div style="height: 30px"></div>
        </el-select>
        <el-dialog title="搜索商品" :visible.sync="orderVisible" width="950px" v-el-drag-dialog :before-close="orderClose">
            <div style="position: relative;">
                <productTable ref="productList" @doubleClick="doubleClick" @addClick="addClick"></productTable>
            </div>
        </el-dialog>
        <el-dialog
        title="新增商品"
        :visible.sync="procuctVisible"
        width="950px"
        v-el-drag-dialog
        :before-close="productClose">
        <div style="height: 65vh;overflow: auto;position: relative;">
          <productAdd :type="productType" @saveProduct="saveProduct"></productAdd>
        </div>
      </el-dialog>
    </div>
</template>
<script>
import { list as productList } from "@/api/product";
import productTable from "@/components/ProductList/productList";
import productAdd from '@/views/product/add'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
    data() {
        return {
            productName: "",
            goodsId: "",
            productOptions: [],
            orderVisible: false,
            procuctVisible: false,
            productType: "order",
        };
    },
    directives: {elDragDialog},
    components: {
        productTable,productAdd
    },
    props:['data'],
    watch:{
      data:{
        handler(val,old){
          this.productName = val
        },
        immediate:true,
        deep:true
      }
    },
    created(){
      this.getProductList()
    },
    methods: {
        getProductList(query) {
            // 加载商品
            productList({ keyword: query, pageSize: 20, isList: true })
                .then((res) => {
                    this.productOptions = res.data.data
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        changeProduct(data) {
            this.$emit('chooseProduct',data)
        },
        toAddProduct() {
            this.orderVisible = true;
        },
        toSearchProduct() {
            this.procuctVisible = true;
        },
        orderClose() {
            this.orderVisible = false;
            this.$refs.productList.cancelClick();
        },
        doubleClick(data) {
            this.productName = data.name
            this.$emit('chooseProduct',data)
            this.orderVisible = false
        },
        addClick(data) {
            var _this = this;
            console.log(data)
            if(data.length>0){
               this.productName = data.name
               this.$emit('chooseProduct',data[0])
            }
            this.orderVisible = false;
        },
        //新增商品弹窗
        productClose() {
            this.procuctVisible = false;
        },
        saveProduct(data) {
            this.productOptions.splice(0, 0, data);
            this.goodsId = data.goodsId;
            this.productName = data.name;
            this.procuctVisible = false;
        },
    },
};
</script>
<style scoped>
.elOption {
    background-color: #909399;
    color: white;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 40px;
}
.elOption1{
    background-color: #409EFF;
    color:white ;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 40px
  }
</style>